import React, {Component} from 'react';
import {Layout, Icon, Menu, Dropdown, Button, Modal, Input} from 'antd';

import {LinkWrapper} from '../../../../components';
import utils from '../../../../utils';

import './index.less';

const {Header} = Layout;

export default class Head extends Component {

    state = {
        visible: false,
        spanolder: '',
        spanrepeat: ''
    }

    handleOk = (e) => {
        let userInfo = this.props.userInfo;
        let older = this.refs.older.refs.input.value;
        let newkey = this.refs.newkey.refs.input.value;
        let repeat = this.refs.repeat.refs.input.value;
        if (older !== userInfo.password) {
            this.setState({
                spanolder: '原口令不正确'
            });
        } else if (repeat !== newkey) {
            this.setState({
                spanrepeat: '新口令不一致'
            });
        } else {
            this.setState({
                spanolder: '',
                spanrepeat: '',
                visible: false
            });
            let data = utils.post('/api/setting', {newkey}, '');
            data.then((res) => {
                if (res && res.code !== -1) {
                    utils.removeCookie('token');
                    utils.setCookie('token', res.token);
                    alert('口令修改成功请重启实验');
                    location.pathname = '/system';
                } else {
                    alert('暂时无法修改密码');
                }
            });
        }
    }

    handleCancel = (e) => {
        this.setState({
            visible: false
        });
    }

    handleRegister = (e) => {
        this.setState({
            visible: true
        });
    }

    render() {
        const userInfo = this.props.userInfo || {};
        const displayName = userInfo.displayName || 'default-user';
        const displayUpper = displayName
            ? displayName.slice(0, 1).toUpperCase()
            : <span className="icon-user" />;
        const menu = (
            <Menu>
                <Menu.Item>
                    <span className='Key'>口令：{userInfo.password || 'default-password'}  <Button className='setting' shape="circle" icon="setting" onClick={this.handleRegister}/></span>
                </Menu.Item>
            </Menu>
        );
        return (
            <Header>
                <div className='common-header'>
                    <div className='user-info'>
                        <Dropdown overlay={menu}>
                            <span className="display-name">
                                {displayName} <Icon type="down" />
                            </span>
                        </Dropdown>
                        <a href="/" className="logout" alt="logout">
                            <Icon type="logout" />
                        </a>
                    </div>
                </div>
                <Modal
                    title="设置口令"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <div>
                        <div><Input ref="older" placeholder="原口令" type="password"/><span className='register'>{this.state.spanolder}</span></div>
                        <div><Input ref="newkey" placeholder="新口令" type="password"/><span className='register'></span></div>
                        <div><Input ref="repeat" placeholder="确认口令" type="password"/><span className='register'>{this.state.spanrepeat}</span></div>
                    </div>
                </Modal>
            </Header>
        );
    }
}
